<template>
    <div class="btn-wrapper">
        <ul class="btn-list">
            <li
                    v-for="(keyString,key) in buttonKeys"
                    :key="key"
                    @click="clickFn(keyString)"
            >
                {{keyString}}
            </li>
        </ul>
    </div>
</template>

<script>
let cache = 0
let type = ""
let inputNext = false
export default {
  name: "btn-wrapper",
  data () {
    return {
      last: 0,
      buttonKeys: [
        "AC", "+/-", "%", "÷", "7", "8", "9", "×", "4", "5", "6", "-", "1", "2", "3", "+", "0", ".", "="
      ]
    }
  },
  props: {
    current: {
      type: String,
      required: true
    }
  },
  methods: {
    clickFn (keyString) {
      let transformed = Number(keyString)
      switch (
        (typeof transformed === "number" && !isNaN(transformed)) ||
      keyString === "." ||
      keyString
      ) {
        case true:
          this.setCurrent(keyString)
          break
        case "AC":
          this.endCalc(true)
          break
        case "=":
          this.endCalc(false, true)
          break
        case "+/-":
          break
        case "%":
          break
        default:
          this.setType(keyString)
      }
    },
    setCurrent (keyString) {
      this.$emit(
        "set-current",
        (this.current === "0" || inputNext) && keyString !== "."
          ? keyString
          : this.current + keyString
      )
      inputNext = false
    },
    setType (keyString) {
      cache = cache || parseFloat(this.current)
      if (type) {
        this.endCalc(false)
      }
      inputNext = true
      type = keyString
    },
    calc () {
      const last = parseFloat(this.current)
      cache = cache || last
      switch (type) {
        case "÷":
          return cache / last
        case "-":
          return cache - last
        case "×":
          return cache * last
        case "+":
        case "":
          return cache + last
      }
    },
    endCalc (isClear = false, isEnd = false) {
      cache = isClear ? 0 : this.calc()
      type = isClear ? "" : type
      this.$emit("set-current", isClear ? "0" : cache.toString())
      inputNext = true
      cache = isEnd ? 0 : cache
    }
  }
}
</script>

<style lang="less" scoped>
    .btn-wrapper {
        color: white;
        font-size: 2em;
        .btn-list {
            li {
                float: left;
                width: 21%;
                height: 21vw;
                box-sizing: border-box;
                margin: 2%;
                text-align: center;
                line-height: 21vw;
                background-color: rgb(36, 36, 36);
                border-radius: 10.5vw;
                cursor: pointer;
                transition: box-shadow 0.2s linear;
                &:nth-child(4n),
                &:last-child {
                    background-color: rgb(255, 145, 0);
                    font-size: 1.3em;
                    line-height: 19vw;
                }
                &:nth-child(-n + 3) {
                    background-color: rgb(182, 182, 182);
                    color: #333;
                }
                &:nth-last-child(3) {
                    text-align: left;
                    text-indent: calc(12.5vw - 0.5em);
                    width: 46%;
                }
                &:hover {
                    box-shadow: 0 0 0 21vw rgba(209, 209, 209, 0.76) inset;
                    transition: box-shadow 0s linear;
                    -webkit-tap-highlight-color: transparent;
                }
            }
            &::after {
                content: "";
                clear: both;
            }
        }
    }
</style>
